<template>
	<view>
		<view>
			<u-search placeholder="输入关键词搜索" v-model="keyword"></u-search>
		</view>
		<u-swiper :list="ban"  :height="220" radius="0"></u-swiper>
		<view class="cateList">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(item,index) in cateList" @click="goCate(item)">
					<u-icon :customStyle="{paddingTop:30+'rpx'}" :name="item.icon" :size="36"></u-icon>
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	
		
		<u-sticky bgColor="#fff">
			<u-tabs :list="cateList" @change="cateChange" :current="current" lineColor="#23c993" keyName="title" lineWidth="30" :activeStyle="{color: '#23c993',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</u-sticky>
		<view class="recommend">
			<view class="item" v-for="(item,index) in list" :key="index" @click="go('/pages/info/detail?id=' + item.opern_id)">
				<u--image :showLoading="true" :src="item.img" width="200rpx" height="150rpx"></u--image>
				<view class="info">
					<view class="title">{{item.title}}</view>
					<view class="price">
						<text class="price-num">{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notices:[],
				ban: [
				],
				cateList: [],
				list: [],
				current:0,
				is_more: 0,
				query: {
					type: 3,
					page: 1,
					size: 10
				},
			};
		},
		onShow() {
			this.getRecommentListFun();
		},
		onLoad() {
			this.getHomeIndexFun();
			
		},
		onReachBottom() {
			if (this.is_more) {
				this.getRecommentListFun();
			}
		},
		methods: {
			toSelectCity(){
				uni.navigateTo({
					url: "/pages/mine/region"
				})
			},
			go(url){
				uni.navigateTo({
					url
				})
			},
			cateChange(e){
				this.current = e.index;
				this.query.type = e.category_id
				this.query.page = 1;
				this.getRecommentListFun();
			},
			getRecommentListFun(){
				var _this = this;
				uni.$u.http.post('/Opern/page',{...this.query}).then(async res =>{
					let curPageData = res.lists;
					if (this.query.page == 1) {
						_this.list = [];
					}
					if (res.is_more) {
						_this.query.page++;
					}
					_this.is_more = res.is_more;
					_this.list = _this.list.concat(curPageData);
				}).catch(err => {
				})
			},
			getHomeIndexFun(){
				uni.$u.http.get('/Home/index').then(async res =>{
					this.ban = res.lunbo
					this.cateList = res.category
					this.notices = res.notices
				}).catch(err => {
				})
			},
			goCate(item){
				uni.navigateTo({
					url:'/pages/info/list?type=' + item.category_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cateList{
		padding: 20rpx 0 30rpx 0;
	}
	.grid-text{
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.recommend{
		padding: 0 30rpx;
		.item{
			margin-top: 30rpx;
			display: flex;
			.info{
				flex: 1;
				margin-left: 30rpx;
				.title{
					font-size: 32rpx;
				}
				.price{
					.price-num{
						font-size: 36rpx;
						font-weight: 600;
						// color: red;
					}
					.unit{
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>